import styled from "styled-components";
import TextField from "@mui/material/TextField";
import LocalOfferIcon from "@mui/icons-material/LocalOffer";
import { connect } from "react-redux";
import { editLabel } from "../../redux/action";
const InputFieldWrapper = styled.div`
  border-top: 1px solid #f6f6f6;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  padding: 5px 12px;
  .tag {
    display: flex;
    margin: 0 5px;
    width: 50px;
    text-align: center;
    font-size: 12px;
  }
  .spend {
    white-space: nowrap;
    padding: 0 6px;
    font-size: 20px;
    color:black;
  }
`;
const InputFiled = (props: any) => {
  const { label, btnContent, editLabel } = props;

  const onHandleInput = (event: any) => {
    editLabel(event.target.value);
  };

  return (
    <InputFieldWrapper>
      <LocalOfferIcon />
      <div className="tag">标签</div>
      <TextField
        key="xxx"
        fullWidth
        label="添加备注"
        size="small"
        value={label}
        onChange={onHandleInput}
      />

      <span className="spend">{btnContent}</span>
    </InputFieldWrapper>
  );
};
const mapStateToProps = (state: any) => {
  return { amount: state.note.amount ,note: state.note};
};
export default connect(mapStateToProps, { editLabel })(InputFiled);
